<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>基本信息</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			body {
				background-color: #FFFFFF;
			}
			.mui-content {
				background-color: #FFFFFF;
			}
			.info-div {
				width: 100%;
				background-color: #FFFFFF;
			}
			.item-div {
				margin: 0px 15px 0px 28px;
				height: 55px;
				position: relative;
			}
			.item-span {
				line-height: 55px;
				font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #666666;
			}
			.item-icon {
				width: 20px;
				height: 20px;
				position: absolute;
				right: 0px;
				top: 22px;
			}
			.line-div {
				width: 100%;
				height: 1px;
				background-color: #F3F3F3;
			}
			input[type=text] {
				padding: 0px;
			    float: right;
	    			width: 68%;
				margin-bottom: 0;
				height: 55px; 
				border-width: 0px;
				color:#515151;
				font-size: 15px;
				background-color: transparent;
			}
			::-webkit-input-placeholder{
			    font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #999999;
			}
			.right-div-container {
				display: inline-block;
				float: right;
				width: 70%;
			}
			.right-div {
				display: inline-block;
				float: right;
			}
			.right-span {
				line-height: 55px;
				font-size: 14px;
				color: #999999;
			}
			.choose-img {
				width: 32px;
				height: 32px;
				margin-top: 8px;
			}
			#usedNameInfo {
				display: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">基本信息</h1>
		</header>
		<div class="mui-content">
			<div class="info-div">
				<div class="item-div">
					<span class="item-span">姓（中文）</span>
					<input type="text" id="surnameChinese" placeholder="请输入中文姓"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">名（中文）</span>
					<input type="text" id="nameChinese" placeholder="请输入中文名"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">姓（拼音）</span>
					<input type="text" id="surnameEnglish" placeholder="请输入中文姓"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">名（拼音）</span>
					<input type="text" id="nameEnglish" placeholder="请输入中文名"/>
				</div>
				<div class="line-div"></div>
				<div id="isUsedName" class="item-div">
					<span class="item-span">是否有曾用名</span>
					<div id="showUserPicker" class="right-div-container">
						<span class="right-span" id="isHava">否</span>
						<div class="right-div">
							<img class="choose-img" src="../img/detail/down_color_icon.png" />
						</div>
					</div>
				</div>
				<div class="line-div"></div>
			</div>
			<div id="usedNameInfo" class="info-div">
				<div class="item-div">
					<span class="item-span">曾用姓（中文）</span>
					<input type="text" id="oldNameSurnameChinese" placeholder="请输入中文姓"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">曾用名（中文）</span>
					<input type="text" id="oldNameNameChinese" placeholder="请输入中文名"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">曾用姓（拼音）</span>
					<input type="text" id="oldNameSurnameEnglish" placeholder="请输入中文名"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">曾用名（拼音）</span>
					<input type="text" id="oldNameNameEnglish" placeholder="请输入中文名"/>
				</div>
				<div class="line-div"></div>
			</div>
			<div class="transaction-container"><button type="button">保存</button></div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.poppicker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var customerId = base.getParameter("customerId");
		var applyCustomerId = base.getParameter("applyCustomerId");
		var userPicker = null;
		var _getParam = function(obj, param) {
			return obj[param] || '';
		};
		(function($, doc) {
			$.init();
			getBasicInfoData();
			$.ready(function() {
				//普通示例
				userPicker = new $.PopPicker();
				userPicker.setData([{
					value: '0',
					text: '否'
				}, {
					value: '1',
					text: '是'
				}]);
			});
		})(mui, document);
		$("#isUsedName").on("tap", "#showUserPicker", function() {
			document.activeElement.blur();
			userPicker.show(function(items) {
				$("#isHava").html(_getParam(items[0], 'text'));
				if (_getParam(items[0], 'value') == 1) {
					$('#usedNameInfo').show();
				} else {
					$('#usedNameInfo').hide();
				}
			});
		})
		function getBasicInfoData() {
			base.setWait('正在获取数据');
			var url = base.url.getBasicInfo;
			base.postData(url, {applyCustomerId: applyCustomerId}, getBasicInfoSuccess)
		}
		function getBasicInfoSuccess(data) {
			if (data.success) {
				$("#surnameChinese").val(data.extendData.surnameChinese);
				$("#nameChinese").val(data.extendData.nameChinese);
				$("#surnameEnglish").val(data.extendData.surnameEnglish);
				$("#nameEnglish").val(data.extendData.nameEnglish);
				$("#isHava").text(getWhetherStr(data.extendData.isOldName));
				if (data.extendData.isOldName == 1) {
					$("#usedNameInfo").show();
					$("#oldNameSurnameChinese").val(data.extendData.oldNameSurnameChinese);
					$("#oldNameNameChinese").val(data.extendData.oldNameNameChinese);
					$("#oldNameSurnameEnglish").val(data.extendData.oldNameSurnameEnglish);
					$("#oldNameNameEnglish").val(data.extendData.oldNameNameEnglish);
				}
			} else {
				mui.toast(data.message);
			}
		}
		$(".transaction-container").on("tap", "button", function() {
			var url = base.url.updateVisaApplyCustomerInfo;
			var params = {
				applyCustomerId: applyCustomerId,
				isOldName: getWhetherValue($("#isHava").text()),
				surnameChinese: $("#surnameChinese").val(),
				nameChinese: $("#nameChinese").val(),
				surnameEnglish: $("#surnameEnglish").val(),
				nameEnglish: $("#nameEnglish").val(),
				oldNameSurnameChinese: $("#oldNameSurnameChinese").val(),
				oldNameNameChinese: $("#oldNameNameChinese").val(),
				oldNameSurnameEnglish: $("#oldNameSurnameEnglish").val(),
				oldNameNameEnglish: $("#oldNameNameEnglish").val(),
			}
			base.postData(url, params, function(data) {
				mui.toast(data.message);
				if (data.success) {
					setTimeout(function(){
						mui.back();
					}, 1000);
				}
			});
		})
	</script>
</html>